<!--
 * @Author: 曹捷
 * @Date: 2020-06-29 14:22:34
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-11-16 17:15:50
 * @Description: 用户信息展示 ，以及关注
--> 
<template>
  <div class="list-item" v-if="dataInfo[id]">
    <div class="flex-l-r list-body p-l-5 p-r-5">
      <div class="flex1">
        <div class="flex-l-r">
          <obitImage :src="dataInfo.photoUrl" @click="$app.toUserCenter(dataInfo[id],dataInfo.realName)"
            class="list-item-img" type="man" />
          <div class="flex1">
            <div class="obit-title p-b-5">{{dataInfo.realName}}</div>
            <div class="obit-info" v-if="hasInfoSlot">
              <slot name="info"></slot>
            </div>
            <div class="obit-info" v-else>
              <span class="p-r-10" v-if="dataInfo.createTime">{{dataInfo.createTime}}</span>
              <span class="p-r-5" v-if="dataInfo.expertDesc">{{dataInfo.expertDesc}}</span>
              <span v-if="dataInfo.labels">{{dataInfo.labels}}</span>
            </div>
          </div>
        </div>
      </div>
      <span class="operate m-r-10" v-if="hasOperate &&!hasSelf">
        <span :class="{ 'btn-middle-3':dataInfo.isFocus === 1}" @click="focusUser" class="btn-middle-1 p-r-5 p-l-5">
          <span :class="{'icon-hot':dataInfo.isFocus !== 1,'icon-hotActive':dataInfo.isFocus === 1}"
            class="iconfont"></span>
          {{focusName}}
        </span>
        <slot :slot-scope="userInfo" name="operate"></slot>
      </span>
    </div>
  </div>
</template>

<script>
import userMix from './userMix'
export default {
  mixins: [userMix],
  props: {
    userInfo: {
      type: Object,
      required: true,
    },
    name: {
      type: String,
      default: 'realName',
    },
    hasOperate: {
      type: Boolean,
      default: true,
    },
    id: { type: String, default: 'createBy' },
  },
  data () {
    return {
      dataInfo: {},
    }
  },
  watch: {
    userInfo () {
      this.dataInfo = this.$util.util.cloneObj(this.userInfo)
      this.initFocus()
    },
  },
  computed: {
    hasInfoSlot () {
      return this.$slots.info
    },
  },
  mounted () {
    this.dataInfo = this.$util.util.cloneObj(this.userInfo)
    if (this.hasOperate) {
      this.initFocus()
    }
  },
  methods: {},
}
</script>

<style lang="scss">
.operate {
  text-align: center;
}
</style>
